var app = null;
var container = null;
var todoContainer = null;

function init(width, height, dom) {
	app = new PIXI.Application({
		width: width || 464,
		height: height || 320,
		backgroundColor: 0x1099bb,
		eventMode: 'static',
		resolution: window.devicePixelRatio || 1,
	});
	(dom || document.body).appendChild(app.view);
	app.renderer.autoResize = true;

	todoContainer = new PIXI.Container();

	container = new PIXI.Container();
	//container.interactive = true;
	//container.interactiveChildren = true;
	// container.eventMode = "static";
	container.cursor = "pointer";
	container.on("click", (event) => {
		console.log("graphics container")
	});

	// app.renderer.plugins.interaction.on("click", (event) => {
	// 	console.log("graphics container")
	// });



	// app.renderer.events.onPointerDown =function(event,p1,p2){
	// 	console.log("onPointerDown",event,p1,p2)
	// 	app.stage
	// }

	console.log("app.renderer.events", app.renderer.events)

	app.stage.addChild(container);
	app.stage.addChild(todoContainer);
	// // 创建一个纹理
	// const texture = PIXI.Texture.from('bunny.png');

	// // 创建5x5兔子网格
	// for (let i = 0; i < 25; i++) {
	// 	const bunny = new PIXI.Sprite(texture);
	// 	bunny.anchor.set(0.5);
	// 	bunny.x = (i % 5) * 40;
	// 	bunny.y = Math.floor(i / 5) * 40;
	// 	container.addChild(bunny);
	// }

	// 将容器移到中心
	container.x = 20; //app.screen.width / 2;
	container.y = 50; //app.screen.height / 2;

	// 本地container坐标系中的兔子雪碧中心
	container.pivot.x = container.width / 2;
	container.pivot.y = container.height / 2;

	container.sortableChildren = true;
	app.stage.sortableChildren = true;

	// 监听动画更新
	app.ticker.add((delta) => {
		// 旋转容器！
		// 使用delta创建与帧无关的转换
		//container.rotation -= 0.01 * delta;
	});
	//drawRect({x:300,y:300,width:100,height:100},todoContainer)


	container.on("pointerup", (event, c) => {
		if (currentRect) {
			currentRect.zIndex = 0;
			
			currentRect.lineStyle(1, 0xFF00FF, 1);
			currentRect.beginFill(0x66CCFF);
			currentRect.drawRect(0, 0, rect.width, rect.height);
			currentRect.endFill();
			currentRect = null;
		}
	});
}

var currentRect = null;

function drawRect(rect, cntr = container) {
	let rectangle = new PIXI.Graphics();
	rectangle.lineStyle(1, 0x888888, 1);
	rectangle.beginFill(0x66CCFF);
	rectangle.drawRect(0, 0, rect.width, rect.height);
	rectangle.endFill();
	rectangle.x = rect.x;
	rectangle.y = rect.y;
	rectangle.rect = rect;
	//rectangle.interactive=true;
	//rectangle.buttonMode = true;
	rectangle.cursor = "pointer";
	//rectangle.eventMode = "static";
	// rectangle.on("click", (event,c) => {
	// 	console.log("click graphics",event,c)
	// });

	rectangle.on("pointerdown", (event, c) => {
		if (currentRect == rectangle)
			rectangle.status = 1
		else {
			currentRect = rectangle;
		}
		rectangle.lineStyle(1, 0x0000FF, 1);
		rectangle.beginFill(0x66CCFF);
		rectangle.drawRect(0, 0, rect.width, rect.height);
		rectangle.endFill();
		currentRect.zIndex = 1;
		app.stage.sortableChildren = true;
		//console.log("zIndex",currentRect,currentRect.zIndex);
	});

	rectangle.on("pointermove", (event, c) => {
		if (rectangle != currentRect) return;
		rectangle.x = rectangle.x + event.movement.x;
		rectangle.y = rectangle.y + event.movement.y;

		//console.log("mousemove graphics", event, c)

	});

	rectangle.on("pointerup", (event, c) => {
		currentRect.zIndex = 0;
		currentRect = null;
	});
	rectangle.on("pointerleave", (event, c) => {
		//if(currentRect)currentRect.zIndex = 0;
		//currentRect = null;
	});
	//app.stage.addChild(rectangle);
	cntr.addChild(rectangle);
	return rectangle;
}

function each(list, handler) {
	for (var i = 0; i < list.length; i++) {
		handler(list[i], i)
	}
}

function render(rectList) {
	each(rectList, function(rect) {
		drawRect(rect)
	})
}

function resize(w, h) {
	app.renderer.resize(w, h); // = w;

}
export {
	render,
	drawRect,
	app,
	init,
	resize
}